<template>
  <div class="collapse ">
    <div style="height:30px; display:flex; align-items: center; background-color: #eee; margin-bottom: 10px;">
      <slot name="title">标题</slot>
      <div style="margin-left: auto;">
        <slot name="subtitle">副标题</slot>
        <van-icon @click="toggle" v-if="isCollapse" name="arrow-down" />
        <van-icon @click="toggle" v-else name="arrow-left" />
      </div>
    </div>
    <div v-show="isCollapse">
      <slot></slot>
    </div>
  </div>
</template>
<script>
import { ref } from 'vue'
export default {
  props: {
    value: {
      type: Boolean,
      default: false
    }
  },
  setup (props, context) {
    const isCollapse = ref(props.value || false)

    const toggle = () => {
      isCollapse.value = !isCollapse.value
      context.emit('input', isCollapse.value)
    }
    return {
      isCollapse,
      toggle
    }
  }
}
</script>
